<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逸君达商铺透明应援扇设计工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <!-- 引入html2canvas库 -->
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#64748B',
                        secondary: '#F97316',
                        neutral: '#F8FAFC',
                        dark: '#1E293B'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .canvas-container {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f0f0f0;
                position: relative;
            }
            .preview-container {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #E5E7EB; /* 灰色背景 */
                position: relative;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            }
            .handle-gradient {
                background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.8) 100%);
            }
            /* 保存图片时的加载状态样式 */
            .save-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease;
            }
            .save-overlay.active {
                opacity: 1;
                pointer-events: all;
            }
            .save-spinner {
                border: 4px solid rgba(0, 0, 0, 0.1);
                border-left-color: #64748B;
                border-radius: 50%;
                width: 36px;
                height: 36px;
                animation: spin 1s linear infinite;
            }
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            /* 新增样式 */
            .circle-color-display {
                position: absolute;
                top: 238px;
                left: calc(50% + 30px); /* 扇柄右侧 */
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 1px solid #ccc;
            }
            .circle-color-note {
                position: absolute;
                top: 262px;
                left: calc(50% + 30px); /* 扇柄右侧 */
                font-weight: bold;
                color: #4B5563;
                font-size: 0.875rem;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <header class="text-center mb-8">
            <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">透明应援扇设计工具</h1>
            <p class="text-gray-600 text-[clamp(0.9rem,2vw,1rem)]">上传图片，自定义你的专属应援扇</p>
        </header>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
                <!-- 左侧控制面板 -->
                <div class="space-y-6">
                    <div class="bg-neutral rounded-lg p-5 shadow-sm">
                        <h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
                            <i class="fa fa-picture-o mr-2 text-primary"></i>图片上传
                        </h2>
                        <div class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-8 cursor-pointer transition-all duration-300 hover:border-primary hover:bg-blue-50" id="upload-area">
                            <i class="fa fa-cloud-upload text-4xl text-gray-400 mb-3"></i>
                            <p class="text-gray-600 mb-2">点击或拖拽图片到此处上传</p>
                            <p class="text-xs text-gray-500">支持 JPG, PNG, GIF 格式，建议尺寸 3000×3000px</p>
                            <input type="file" id="image-upload" accept="image/*" class="hidden">
                        </div>
                    </div>

                    <div class="bg-neutral rounded-lg p-5 shadow-sm">
                        <h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
                            <i class="fa fa-sliders mr-2 text-primary"></i>图片调整
                        </h2>
                        
                        <div class="space-y-4">
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-1">缩放比例</label>
                                <input type="range" id="scale-slider" min="0.1" max="2" step="0.01" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                                <div class="flex justify-between text-xs text-gray-500 mt-1">
                                    <span>缩小</span>
                                    <span id="scale-value">100%</span>
                                    <span>放大</span>
                                </div>
                            </div>
                            
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-1">水平位置</label>
                                <input type="range" id="x-position-slider" min="-100" max="100" step="1" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                            </div>
                            
                            <div>
                                <label class="block text-gray-700 text-sm font-medium mb-1">垂直位置</label>
                                <input type="range" id="y-position-slider" min="-100" max="100" step="1" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                            </div>
                            <!-- 添加重置按钮 -->
                            <button id="reset-position" class="bg-primary hover:bg-primary/90 text-white font-semibold py-2 px-4 rounded-lg shadow-sm transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50">
                                <i class="fa fa-undo mr-2"></i>重置位置
                            </button>
                        </div>
                    </div>

                    <div class="bg-neutral rounded-lg p-5 shadow-sm">
                        <h2 class="text-xl font-semibold text-dark mb-4 flex items-center">
                            <i class="fa fa-cog mr-2 text-primary"></i>高级选项
                        </h2>
                        
                        <div class="space-y-4">
                            <div class="flex items-center justify-between">
                                <label class="flex items-center cursor-pointer">
                                    <input type="checkbox" id="circle-toggle" class="form-checkbox h-5 w-5 text-primary rounded border-gray-300 focus:ring-primary" checked>
                                    <span class="ml-2 text-gray-700">显示圆线</span>
                                </label>
                                <div id="circle-color-container" class="flex items-center">
                                    <label class="text-gray-700 text-sm mr-2">圆线颜色:</label>
                                    <input type="color" id="circle-color" value="#FF0000" class="w-8 h-8 border-0 rounded cursor-pointer"> <!-- 默认红色 -->
                                </div>
                            </div>
                            
                            <div class="flex items-center justify-between">
                                <label class="flex items-center cursor-pointer">
                                    <input type="checkbox" id="ring-toggle" class="form-checkbox h-5 w-5 text-primary rounded border-gray-300 focus:ring-primary">
                                    <span class="ml-2 text-gray-700">显示圆环装饰</span>
                                </label>
                                <div id="ring-controls" class="hidden flex flex-wrap items-center gap-3">
                                    <div class="flex items-center">
                                        <label class="text-gray-700 text-sm mr-1">外径:</label>
                                        <input type="range" id="ring-outer-width" min="1" max="228" step="1" value="228" class="w-24 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                                        <input type="number" id="ring-outer-width-input" min="1" max="228" value="228" class="w-16 px-2 py-1 border border-gray-300 rounded-md text-sm ml-1">
                                        <span>px</span>
                                    </div>
                                    <div class="flex items-center">
                                        <label class="text-gray-700 text-sm mr-1">内径:</label>
                                        <input type="range" id="ring-inner-width" min="1" max="227" step="1" value="223" class="w-24 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                                        <input type="number" id="ring-inner-width-input" min="1" max="227" value="223" class="w-16 px-2 py-1 border border-gray-300 rounded-md text-sm ml-1">
                                        <span>px</span>
                                    </div>
                                    <div class="flex items-center">
                                        <label class="text-gray-700 text-sm mr-1">颜色:</label>
                                        <input type="color" id="ring-color" value="#FF0000" class="w-8 h-8 border-0 rounded cursor-pointer">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex items-center">
                                <label class="flex items-center cursor-pointer">
                                    <input type="checkbox" id="handle-toggle" class="form-checkbox h-5 w-5 text-primary rounded border-gray-300 focus:ring-primary" checked>
                                    <span class="ml-2 text-gray-700">显示扇柄</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧预览面板 -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden flex-grow">
                    <div class="bg-red-100 border border-red-200 rounded-lg p-4 text-center animate-pulse">
                        <p class="text-red-700 font-semibold text-lg">注：注:色差在10%内为正常范围对颜色过高的宝子们慎拍!!!交货时间为确认后3-5天内发货定制产品非质量问题不退不换请仔细核对，印后概不负责。</p>
                    </div>

                    <div class="preview-container aspect-square h-[600px]" id="preview-container">
                        <!-- 应援扇预览 -->
                        <div class="relative" id="fan-preview">
                            <!-- 透明圆形背景 (5.7cm = 228px @ 100dpi) -->
                            <div class="w-[228px] h-[228px] rounded-full bg-gray-100/50 backdrop-blur-sm shadow-inner relative overflow-hidden" id="fan-circle">
                                <!-- 图片容器 -->
                                <div class="absolute inset-0 flex items-center justify-center" id="image-container">
                                    <img id="preview-image" src="" alt="预览图片" class="max-w-full max-h-full object-contain transform transition-transform duration-300" style="transform: scale(1) translate(0px, 0px);">
                                </div>
                                
                                <!-- 圆环装饰 (最大直径5.7cm) -->
                                <div class="absolute inset-0 rounded-full hidden border-0" id="ring-decoration"></div>
                                
                                <!-- 圆线 (5.5cm = 218px @ 100dpi) -->
                                <div class="absolute top-[5px] left-[5px] w-[218px] h-[218px] rounded-full border border-red/30" id="circle-line"></div> <!-- 默认红色 -->
                            </div>
                            
                            <!-- 扇柄 (窄一点，往上2.5mm = 10px @ 100dpi) -->
                            <div class="absolute top-[238px] left-1/2 transform -translate-x-1/2 w-[24px] h-[140px] rounded-b-lg handle-gradient border border-gray-300/30 opacity-80" id="fan-handle">
                                <!-- 扇柄顶部蘑菇头样式 -->
                                <div class="absolute -top-[25px] left-1/2 transform -translate-x-1/2 w-[36px] h-[30px] bg-white/80 rounded-full border border-gray-300/30"></div>
                            </div>
                            <!-- 新增显示圆线颜色的元素 -->
                            <div class="circle-color-display" id="circle-color-display"></div>
                            <div class="circle-color-note font-bold text-gray-1000 text-sm">颜色圆线为成品线，印刷后不显示，与大面灰色颜色相同为透明色</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>© 2025 透明应援扇设计工具 | 所有设计仅供预览，实际产品以实物为准</p>
        </footer>
    </div>

    <!-- 保存图片时的加载指示器 -->
    <div class="save-overlay" id="save-overlay">
        <div class="save-spinner"></div>
    </div>

    <script>
        // DOM 元素
        const uploadArea = document.getElementById('upload-area');
        const imageUpload = document.getElementById('image-upload');
        const previewImage = document.getElementById('preview-image');
        const scaleSlider = document.getElementById('scale-slider');
        const scaleValue = document.getElementById('scale-value');
        const xPositionSlider = document.getElementById('x-position-slider');
        const yPositionSlider = document.getElementById('y-position-slider');
        const circleToggle = document.getElementById('circle-toggle');
        const circleLine = document.getElementById('circle-line');
        const circleColor = document.getElementById('circle-color');
        const circleColorContainer = document.getElementById('circle-color-container');
        const handleToggle = document.getElementById('handle-toggle');
        const fanHandle = document.getElementById('fan-handle');
        const ringToggle = document.getElementById('ring-toggle');
        const ringControls = document.getElementById('ring-controls');
        const ringWidth = document.getElementById('ring-width');
        const ringColor = document.getElementById('ring-color');
        const ringDecoration = document.getElementById('ring-decoration');
        // 获取重置按钮
        const resetPositionButton = document.getElementById('reset-position');
        // 新增元素
        const circleColorDisplay = document.getElementById('circle-color-display');
        // 获取新添加的DOM元素
        const ringOuterWidthSlider = document.getElementById('ring-outer-width');
        const ringOuterWidthValue = document.getElementById('ring-outer-width-value');
        const ringInnerWidthSlider = document.getElementById('ring-inner-width');
        const ringInnerWidthValue = document.getElementById('ring-inner-width-value');
        // 新增输入框元素
        const ringOuterWidthInput = document.getElementById('ring-outer-width-input');
        const ringInnerWidthInput = document.getElementById('ring-inner-width-input');

        // 初始化
        previewImage.style.display = 'none';
        
        // 设置圆线默认样式
        circleLine.style.borderWidth = '1px';
        circleLine.style.borderColor = '#FF0000';
        circleColorDisplay.style.backgroundColor = '#FF0000';

        // 上传图片
        uploadArea.addEventListener('click', () => {
            imageUpload.click();
        });

        imageUpload.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    previewImage.src = event.target.result;
                    previewImage.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        // 缩放图片
        scaleSlider.addEventListener('input', () => {
            const scale = parseFloat(scaleSlider.value);
            scaleValue.textContent = `${(scale * 100).toFixed(0)}%`;
            previewImage.style.transform = `scale(${scale}) translate(${xPositionSlider.value}px, ${yPositionSlider.value}px)`;
        });

        // 水平位置调整
        xPositionSlider.addEventListener('input', () => {
            const scale = parseFloat(scaleSlider.value);
            previewImage.style.transform = `scale(${scale}) translate(${xPositionSlider.value}px, ${yPositionSlider.value}px)`;
        });

        // 垂直位置调整
        yPositionSlider.addEventListener('input', () => {
            const scale = parseFloat(scaleSlider.value);
            previewImage.style.transform = `scale(${scale}) translate(${xPositionSlider.value}px, ${yPositionSlider.value}px)`;
        });

        // 显示/隐藏圆线
        circleToggle.addEventListener('change', () => {
            circleLine.style.display = circleToggle.checked ? 'block' : 'none';
            circleColorContainer.style.display = circleToggle.checked ? 'flex' : 'none';
        });

        // 改变圆线颜色
        circleColor.addEventListener('input', () => {
            circleLine.style.borderColor = circleColor.value;
            circleColorDisplay.style.backgroundColor = circleColor.value;
        });

        // 显示/隐藏扇柄
        handleToggle.addEventListener('change', () => {
            fanHandle.style.display = handleToggle.checked ? 'block' : 'none';
        });

        // 显示/隐藏圆环装饰
        ringToggle.addEventListener('change', () => {
            if (ringToggle.checked) {
                ringControls.style.display = 'flex';
                ringDecoration.style.display = 'block';
                // 更新圆环样式
                updateRingStyle();
            } else {
                ringControls.style.display = 'none';
                ringDecoration.style.display = 'none';
            }
        });

        // 调整圆环装饰外径（滑块）
        ringOuterWidthSlider.addEventListener('input', () => {
            const outerWidth = parseInt(ringOuterWidthSlider.value);
            ringOuterWidthInput.value = outerWidth;
            // 确保内径不超过外径
            if (parseInt(ringInnerWidthSlider.value) >= outerWidth) {
                ringInnerWidthSlider.value = outerWidth - 1;
                ringInnerWidthInput.value = outerWidth - 1;
            }
            updateRingStyle();
        });

        // 调整圆环装饰内径（滑块）
        ringInnerWidthSlider.addEventListener('input', () => {
            const innerWidth = parseInt(ringInnerWidthSlider.value);
            ringInnerWidthInput.value = innerWidth;
            // 确保内径不超过外径
            if (innerWidth >= parseInt(ringOuterWidthSlider.value)) {
                ringOuterWidthSlider.value = innerWidth + 1;
                ringOuterWidthInput.value = innerWidth + 1;
            }
            updateRingStyle();
        });

        // 调整圆环装饰外径（输入框）
        ringOuterWidthInput.addEventListener('input', () => {
            let outerWidth = parseInt(ringOuterWidthInput.value);
            // 验证输入范围
            if (isNaN(outerWidth)) outerWidth = 228;
            outerWidth = Math.max(1, Math.min(228, outerWidth));
            ringOuterWidthInput.value = outerWidth;
            ringOuterWidthSlider.value = outerWidth;
            
            // 确保内径不超过外径
            if (parseInt(ringInnerWidthInput.value) >= outerWidth) {
                ringInnerWidthInput.value = outerWidth - 1;
                ringInnerWidthSlider.value = outerWidth - 1;
            }
            updateRingStyle();
        });

        // 调整圆环装饰内径（输入框）
        ringInnerWidthInput.addEventListener('input', () => {
            let innerWidth = parseInt(ringInnerWidthInput.value);
            // 验证输入范围
            if (isNaN(innerWidth)) innerWidth = 223;
            innerWidth = Math.max(1, Math.min(227, innerWidth));
            ringInnerWidthInput.value = innerWidth;
            ringInnerWidthSlider.value = innerWidth;
            
            // 确保内径不超过外径
            if (innerWidth >= parseInt(ringOuterWidthInput.value)) {
                ringOuterWidthInput.value = innerWidth + 1;
                ringOuterWidthSlider.value = innerWidth + 1;
            }
            updateRingStyle();
        });

        // 调整圆环装饰颜色
        ringColor.addEventListener('input', () => {
            if (ringToggle.checked) {
                updateRingStyle();
            }
        });

        // 更新圆环样式的函数
        function updateRingStyle() {
            const outerWidth = parseInt(ringOuterWidthSlider.value);
            const innerWidth = parseInt(ringInnerWidthSlider.value);
            const halfWidth = (outerWidth - innerWidth) / 2;
            const center = outerWidth / 2;

            ringDecoration.style.width = `${outerWidth}px`;
            ringDecoration.style.height = `${outerWidth}px`;
            ringDecoration.style.borderWidth = `${halfWidth}px`;
            ringDecoration.style.borderColor = ringColor.value;
            ringDecoration.style.borderStyle = 'solid';
            ringDecoration.style.left = `calc(50% - ${center}px)`;
            ringDecoration.style.top = `calc(50% - ${center}px)`;
        }

        // 重置位置功能
        resetPositionButton.addEventListener('click', () => {
            // 将缩放比例恢复到初始值
            scaleSlider.value = 1;
            scaleValue.textContent = '100%';
            // 将水平和垂直位置恢复到初始值
            xPositionSlider.value = 0;
            yPositionSlider.value = 0;
            // 更新图片的样式
            previewImage.style.transform = `scale(1) translate(0px, 0px)`;
        });
    </script>
</body>
</html>
